@use "../mixins/function" as *;
@use "./container-var";

/* INFO 容器背景色、流体边框 */
.custom-block.info {
  border-left: none;
  background-color: getCssVar("custom-block-info-bg");
  position: relative;
  transition: all 0.3s;
}

/* INFO 容器流体边框 */
.custom-block.info::before,
.custom-block.info::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid getCssVar("custom-block-info-left");
  transition: all 0.5s;
  animation: flow 6s infinite linear;
  border-radius: 10px;
}

/* INFO 容器流体边框动画 */
.custom-block.info::after {
  animation: flow 6s infinite -3s linear;
}

/* TIP 容器背景色、流体边框 */
.custom-block.tip {
  border-left: none;
  background-color: getCssVar("custom-block-tip-bg");
  position: relative;
  transition: all 0.3s;
}

/* TIP 容器流体边框 */
.custom-block.tip::before,
.custom-block.tip::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid getCssVar("custom-block-tip-left");
  transition: all 0.5s;
  animation: flow 6s infinite linear;
  border-radius: 10px;
}

/* TIP 容器流体边框动画 */
.custom-block.tip::after {
  animation: flow 6s infinite -3s linear;
}

/* WARNING 容器背景色、流体边框 */
.custom-block.warning {
  border-left: none;
  background-color: getCssVar("custom-block-warning-bg");
  position: relative;
  transition: all 0.3s;
}

/* WARNING 容器流体边框 */
.custom-block.warning::before,
.custom-block.warning::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid getCssVar("custom-block-warning-left");
  transition: all 0.5s;
  animation: flow 6s infinite linear;
  border-radius: 10px;
}

/* WARNING 容器流体边框动画 */
.custom-block.warning::after {
  animation: flow 6s infinite -3s linear;
}

/* DANGER 容器背景色、流体边框 */
.custom-block.danger {
  border-left: none;
  background-color: getCssVar("custom-block-danger-bg");
  position: relative;
  transition: all 0.3s;
}

/* DANGER 容器流体边框 */
.custom-block.danger::before,
.custom-block.danger::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid getCssVar("custom-block-danger-left");
  transition: all 0.5s;
  animation: flow 6s infinite linear;
  border-radius: 10px;
}

/* DANGER 容器流体边框动画 */
.custom-block.danger::after {
  animation: flow 6s infinite -3s linear;
}

/* GitHub 风格警告 */

/* NOTE 容器背景色、流体边框 */
.custom-block.note {
  border-left: none;
  background-color: getCssVar("custom-block-note-bg");
  position: relative;
  transition: all 0.3s;
}

/* NOTE 容器流体边框 */
.custom-block.note.github-alert::before,
.custom-block.note.github-alert::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid getCssVar("custom-block-note-left");
  transition: all 0.5s;
  animation: flow 6s infinite linear;
  border-radius: 10px;
}

/* NOTE 容器流体边框动画 */
.custom-block.note.github-alert::after {
  animation: flow 6s infinite -3s linear;
}

/* IMPORTANT 容器背景色、流体边框 */
.custom-block.important {
  border-left: none;
  background-color: getCssVar("custom-block-important-bg");
  position: relative;
  transition: all 0.3s;
}

/* IMPORTANT 容器流体边框 */
.custom-block.important.github-alert::before,
.custom-block.important.github-alert::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid getCssVar("custom-block-important-left");
  transition: all 0.5s;
  animation: flow 6s infinite linear;
  border-radius: 10px;
}

/* IMPORTANT 容器流体边框动画 */
.custom-block.important.github-alert::after {
  animation: flow 6s infinite -3s linear;
}

/* CAUTION 容器背景色、流体边框 */
.custom-block.caution {
  border-left: none;
  background-color: getCssVar("custom-block-caution-bg");
  position: relative;
  transition: all 0.3s;
}

/* CAUTION 容器流体边框 */
.custom-block.caution.github-alert::before,
.custom-block.caution.github-alert::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid getCssVar("custom-block-caution-left");
  transition: all 0.5s;
  animation: flow 6s infinite linear;
  border-radius: 10px;
}

/* CAUTION 容器流体边框动画 */
.custom-block.caution.github-alert::after {
  animation: flow 6s infinite -3s linear;
}

/* 流光边框 - 跑马灯 */
@keyframes flow {
  0%,
  100% {
    clip-path: inset(0 0 90% 0);
  }

  25% {
    clip-path: inset(0 90% 0 0);
  }

  50% {
    clip-path: inset(90% 0 0 0);
  }

  75% {
    clip-path: inset(0 0 0 90%);
  }
}
